<template>
    <meta name="referrer" content="no-referrer" />
    <div class="topbar">
        <div class="wrap tapbarwrap">
            <!-- 左侧 -->
            <div class="left">欢迎来到叩丁狼积分商城</div>
            <!-- 右侧导航 -->
            <ul class="right">
                <li>
                    <img :src="store.userInfo.headImg" alt="" class="avatar" />用户名:{{
                        store.userInfo.nickName
                    }}
                </li>
                <li>我的积分：{{ store.userInfo.coin }}</li>
                <li>获取积分</li>
                <li>叩丁狼官网</li>
                <li v-if="!store.isLogined" class="loginbtn" @click="storeShow.isShowLoginModal = true">
                    登录
                </li>
                <li class="cart-btn" v-if="store.isLogined">
                    <img src="../assets/img/cart.png" alt="" />
                    <span @click="$router.push('/user')">购物车</span>
                    <strong>{{ store.cartTotal }}</strong>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { useStore } from "@/store/user"
import { useShowStore } from "@/store/showModal"
import { useRouter } from 'vue-router';
const router = useRouter()
const store = useStore()
const storeShow = useShowStore()

let token = localStorage.getItem("x-auth-token");
if (token) {
    store.isLogined = true
    store.registerUser()
} else {
    store.isLogined = false
    store.initUserInfo()
}
</script>

<style scoped lang="less">
.topbar {
    height: 40px;
    line-height: 40px;
    background-color: #242b39;
    font-size: 14px;
    font-family: SourceHanSansSC;
    font-weight: 300;
    color: #fff;

    .tapbarwrap {
        display: flex;
        justify-content: space-between;

        .right {
            display: flex;

            li {
                margin-left: 20px;
                cursor: pointer;
                text-align: center;

                &.loginbtn {
                    background-color: #0a328e;
                    width: 124px;
                }

                &.cart-btn {
                    width: 124px;
                    height: 40px;
                    background: #0a328e;
                    text-align: center;

                    img {
                        width: 20px;
                        height: 19px;
                        vertical-align: middle;
                    }

                    span {
                        margin: 0 8px;
                    }

                    strong {
                        width: 22px;
                        height: 22px;
                        line-height: 22px;
                        display: inline-block;
                        border-radius: 50%;
                        background-color: #fd604d;
                    }
                }

                .avatar {
                    width: 23px;
                    height: 23px;
                    border-radius: 50%;
                    vertical-align: middle;
                }
            }
        }
    }
}
</style>
